<template>
  <div>
    <div class="mt-5">
      <a-form layout="inline" :model="searchForm" ref="searchFormRef">
        <a-form-item label="热力卡号" name="alipayConsNo">
          <a-input
            style="width: 200px"
            v-model:value="searchForm.alipayConsNo"
            placeholder="请输入热力卡号"
          />
        </a-form-item>
        <a-form-item label="住户名称" name="holder">
          <a-input
            style="width: 200px"
            v-model:value="searchForm.holder"
            placeholder="请输入住户名称"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)" @click="onSearch"
            >查询</a-button
          >
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :row-class-name="
        (_record: any, index: number) =>
          index % 2 === 1 ? 'table-striped' : null
      "
      :pagination="pagination"
      :scroll="{ x: 3000, y: 550 }"
      bordered
      class="mt-5"
    >
      <template #bodyCell="{ column, text, record }">
        <div v-if="column.dataIndex === 'action'" class="action-grid">
          <div class="action-row">
            <a-button type="link" @click="onPrint">打印收据</a-button>
            <a-button type="link" @click="onInvoicing">开具发票</a-button>
          </div>
          <div class="action-row">
            <a-button type="link" @click="onCheckTickets">查看发票</a-button>
            <a-button type="link" @click="onOfflineInvoicing"
              >线下已开票</a-button
            >
          </div>
        </div>
      </template>
    </a-table>
    <a-modal v-model:open="isInvoicing" title="开具电子发票">
      <a-form :label-col="labelCol">
        <a-form-item label="发票类型">
          <a-radio-group v-model:value="value1" :options="plainOptions" />
        </a-form-item>
        <a-form-item label="发票抬头">
          <a-input placeholder="请输入发票抬头" />
        </a-form-item>
        <a-form-item label="纳税人识别号">
          <a-input placeholder="请输入纳税人识别号" v-if="value1 !== '1'" />
        </a-form-item>
        <a-form-item label="订单金额">
          <a-input placeholder="请输入订单金额" suffix="元" />
        </a-form-item>
        <a-form-item label="电子邮件">
          <a-input placeholder="请输入电子邮件" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea :rows="4" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, h } from "vue";
import { SearchOutlined, CodeSandboxOutlined } from "@ant-design/icons-vue";
import { getPayRecordListApi } from "#/api/core/charge";
import { message } from 'ant-design-vue';
const isInvoicing = ref(false);
const labelCol = { style: { width: "130px" } };
const searchForm = reactive({
  alipayConsNo: "",
  holder: "",
});
const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const searchFormRef = ref(null);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const dataSource = ref([]);
const columns = [
  {
    title: "小区名称",
    dataIndex: "village",
    key: "village",
    align: "center",
    width: 120,
  },
  {
    title: "小区地址",
    dataIndex: "houseAddress",
    key: "houseAddress",
    align: "center",
    width: 150,
  },
  {
    title: "用户姓名",
    dataIndex: "holder",
    key: "holder",
    align: "center",
    width: 100,
  },
  {
    title: "热力卡号",
    dataIndex: "alipayConsNo",
    key: "alipayConsNo",
    align: "center",
    width: 120,
  },
  {
    title: "收费期",
    dataIndex: "year",
    key: "year",
    align: "center",
    width: 100,
  },
  {
    title: "面积名称",
    dataIndex: "",
    key: "",
    align: "center",
    width: 100,
  },
  {
    title: "收费面积",
    dataIndex: "areaName",
    key: "",
    align: "center",
    width: 100,
  },
  // {
  //   title: "单价",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 100,
  // },
  {
    title: "应收全费金额",
    dataIndex: "normalReceivable",
    key: "normalReceivable",
    align: "center",
    width: 120,
  },
  {
    title: "应收基本费金额",
    dataIndex: "heatWasteReceivable",
    key: "heatWasteReceivable",
    align: "center",
    width: 120,
  },
  // {
  //   title: "已收金额",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 100,
  // },
  {
    title: "实收热费",
    dataIndex: "tradeAmount",
    key: "tradeAmount",
    align: "center",
    width: 100,
  },
  {
    title: "含预付款账户金额",
    dataIndex: "prepayAmount",
    key: "prepayAmount",
    align: "center",
    width: "120px",
  },
  {
    title: "实收违约金",
    dataIndex: "lateFeeRealReceive",
    key: "lateFeeRealReceive",
    align: "center",
    width: 100,
  },
  {
    title: "抹零金额",
    dataIndex: "zeroAmount",
    key: "zeroAmount",
    align: "center",
    width: 100,
  },
  {
    title: "交易时间",
    dataIndex: "tradeDate",
    key: "tradeDate",
    align: "center",
    width: 100,
  },
  {
    title: "红冲人",
    dataIndex: "redAccountPerson",
    key: "redAccountPerson",
    align: "center",
    width: 100,
  },
  {
    title: "红冲类型",
    dataIndex: "redAccountType",
    key: "redAccountType",
    align: "center",
    width: 100,
  },
  {
    title: "红冲时间",
    dataIndex: "redAccountDate",
    key: "redAccountDate",
    align: "center",
    width: 100,
  },
  {
    title: "红冲/退款原因",
    dataIndex: "redAccountReason",
    key: "redAccountReason",
    align: "center",
    width: 100,
  },
  {
    title: "退款类型",
    dataIndex: "refundType",
    key: "refundType",
    align: "center",
    width: 100,
  },
  {
    title: "已开发票金额",
    dataIndex: "",
    key: "",
    align: "center",
    width: 120,
  },
  {
    title: "已开收据金额",
    dataIndex: "",
    key: "",
    align: "center",
    width: 120,
  },
  {
    title: "应收违约金",
    dataIndex: "lateFeeReceivable",
    key: "lateFeeReceivable",
    align: "center",
    width: 120,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    align: "center",
    fixed: "right",
    width: 200,
  },
];
const plainOptions = [
  {
    label: "个人/非企业单位",
    value: "1",
  },
  {
    label: "企业单位",
    value: "2",
  },
];
const value1 = ref("1");
const onSearch = async () => {
  if (props.selectedNodeId.length === 0) {
    message.error('请选择左侧树结构！');
    return;
  } else {
    const res = await getPayRecordListApi({
      page: pagination.current,
      limit: pagination.pageSize,
      treeData: props.selectedNodeId,
      ...searchForm,
    });
    dataSource.value = res.data;
    pagination.total = res.total;
  }
};
const onPrint = () => {
  console.log("打印收据");
};
const onInvoicing = () => {
  isInvoicing.value = true;
  console.log("开具发票");
};
const onCheckTickets = () => {
  console.log("查看发票");
};
const onOfflineInvoicing = () => {
  console.log("线下已开票");
};
const onReset = ()=>{
  searchFormRef.value.resetFields();
}
</script>
<style scoped>
.action-grid {
  display: flex;
  flex-direction: column;
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
